<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>ArcGIS Data Loader</title>

    <script src="https://unpkg.com/terraformer@1.0.7"></script>
    <script src="https://unpkg.com/terraformer-wkt-parser@1.1.2"></script>
    <script src="https://unpkg.com/terraformer-arcgis-parser@1.0.5"></script>

    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css" />
    <script src="https://js.arcgis.com/3.28/" type="text/javascript"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="viewer.js"></script>

    <style>
    #map {
      height: 500px;
      width: 100%;
      float: right;
      border: 1px solid #ddd;
    }
    #inputs {
      width: 100%;
      float: left;
    }
    textarea.form-control {
      height: 380px;
      box-sizing: border-box;
      width: 100%;
    }
    .tab-content{
      border: 1px solid #ddd;
      padding: 1rem;
      border-top: 0;
    }
    </style>
  </head>
  <body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="page-header">
          <h1>Terraformer<small> (Browser demo)</small></h1>
        </div>
      </div>

      <div class="col-md-6">
        <div id="inputs">
          <ul id="tabs" class="nav nav nav-tabs">
            <li class="active">
              <a href="#wkt">WKT</a>
            </li>
            <li><a href="#geojson">GeoJSON</a></li>
            <li><a href="#arcgis">ArcGIS</a></li>
          </ul>
          <div class="tab-content">
            <div id="wkt" class="tab-pane active">
              <textarea class="form-control" placeholder="WKT" data-type="wkt">MULTIPOLYGON (((-122.9265 45.725, -122.7622 45.7305, -122.7622 45.6593, -122.6746 45.6155, -122.2474 45.5498, -121.9243 45.6484, -121.9024 45.5552, -121.9243 45.5443, -121.8202 45.4621, -122.3569 45.4621, -122.7458 45.4348, -122.7458 45.5169, -122.9265 45.6319, -122.9265 45.725)))</textarea>
            </div>

            <div id="geojson" class="tab-pane" >
              <textarea class="form-control" placeholder="GeoJSON" data-type="geojson">{"type":"FeatureCollection","properties":{"kind":"state","state":"OR"},"features":[ {"type":"Feature","properties":{"kind":"county","name":"Washington","state":"OR"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-123.1347,45.7798],[-123.0306,45.7798],[-123.0306,45.7524],[-122.9265,45.7250],[-122.9265,45.6319],[-122.7458,45.5169],[-122.7458,45.4348],[-122.7458,45.3307],[-122.8444,45.3471],[-122.8663,45.3197],[-123.0635,45.4019],[-123.1347,45.4348],[-123.4633,45.4348],[-123.4852,45.4457],[-123.4414,45.5224],[-123.2990,45.5936],[-123.4852,45.6812],[-123.4852,45.7086],[-123.3592,45.7086],[-123.3592,45.7798],[-123.1347,45.7798]]]]}} ]}</textarea>
            </div>

            <div id="arcgis" class="tab-pane">
              <textarea class="form-control" placeholder="ArcGIS" data-type="arcgis">{"geometry":{"rings":[[[-122.7458,45.4348],[-122.7458,45.3307],[-122.8444,45.3471],[-122.8663,45.3197],[-122.8499,45.2595],[-122.7403,45.2595],[-122.7896,45.128],[-122.5979,45.0185],[-122.5048,44.9199],[-122.3953,44.8871],[-121.7326,44.8871],[-121.7161,44.9035],[-121.7983,44.9363],[-121.8038,45.013],[-121.6614,45.0678],[-121.6669,45.1171],[-121.6997,45.1226],[-121.749,45.1992],[-121.6833,45.2266],[-121.6942,45.2595],[-121.6997,45.38],[-121.7764,45.4019],[-121.8202,45.4621],[-122.3569,45.4621],[-122.7458,45.4348]]],"spatialReference":{"wkid":4326}},"attributes":{"kind":"county","name":"Clackamas","state":"OR"}}</textarea>
            </div>
            <br>
            <button id="submit" class="btn btn-primary btn-small">Show On Map</button>
            <button id="bounding" class="btn btn-success btn-small">Bounding Box</button>
            <button id="convex" class="btn btn-warning btn-small">Convex Hull</button>
            <button id="clear" class="btn btn-default btn-small">Clear</button>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div id="map"></div>
      </div>
    </div>
  </div>

  <a href="https://github.com/Esri/terraformer-demo"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
  <script>
  $('#tabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
  });
  </script>
</body>
</html>
